<template>
  <div style="height: 100%">
    <div v-loading="homePageLoad" class="homeBoxMask" v-if="homePageLoad === 'load'"></div>
    <div class="homeBoxRefresh" v-else-if="homePageLoad === 'refresh'">
      <span class="refresh_btn" @click="refreshClick">
        <i class="el-icon-refresh"></i>
      </span>
    </div>
    <el-container class="home-container" direction="vertical">
      <!-- 收缩菜单栏按钮 -->
      <!-- <div class="min_max" @click="btns_toggle" @mouseover="over" @mouseout="out" :style="{ left: this.isToggle ? '65px' : '180px' }">
      <img :src="iconBg" alt />
    </div>-->
      <el-header class="header_box" id="siteHeader">
        <div class="outLogin">
          <div class="big_img_box" :style="{ width: this.isToggle ? '64px' : '179px' }">
            <div class="img_box">
              <img src="../assets/images/gsLogo.png" alt="图片" />
            </div>
          </div>
          <!-- @mouseover="over" @mouseout="out" -->
          <div class="tabBtn" @click="btns_toggle">
            <i :class="`el-icon-s-${iconBg}`"></i>
          </div>
          <span>磐石致维</span>
        </div>
        <!-- <div class="xiaoBtn">
        <el-badge is-dot>
          <el-button type="text" class="xiaoBtns" @click="information">消息</el-button>
        </el-badge>
      </div>-->
        <el-popover placement="bottom" width="230" trigger="click">
          <div>
            <div style="width: 100%; height: 45px; border-bottom: 1px solid #efefef; display: flex; align-items: center; padding: 0 12px 5px 12px">
              <img src="@/assets/images/userImgs.png" alt style="width: 40px; height: 40px; border-radius: 50%" />
              <div style="display: flex; flex-flow: column; margin-left: 8px">
                <span>{{ user.zh }}</span>
                <span>{{ user.lxdh }}</span>
              </div>
            </div>
            <ul style="padding-top: 5px">
              <li style="height: 32px; line-height: 32px; cursor: pointer; padding: 0 12px" @click="goClickYM(item.value)" class="zenm" v-for="item in userParams" :key="item.value">
                <i :class="item.icon"></i>
                <span style="margin-left: 10px">{{ item.value }}</span>
              </li>
            </ul>
            <el-button icon="el-icon-switch-button" class="signOut" v-preventReClick @click="signOut()">退出</el-button>
          </div>
          <div slot="reference" @click="userImg" class="naosouBtn">
            <span class="xiaoBtn2">{{ userNames }}</span>
            <img class="user_btn" src="@/assets/images/userImgs.png" alt />
            <!-- <i class="el-icon-user-solid user_btn"></i> -->
          </div>
        </el-popover>
      </el-header>
      <!-- <el-container style="height: 100%" v-else> -->
      <el-container>
        <!-- 左侧菜单栏 -->
        <el-aside :width="isToggle ? '65px' : '180px'" class="no_select">
          <el-menu
            :default-active="tag + ''"
            @open="handleOpen"
            @close="handleClose"
            ref="bgref"
            :unique-opened="true"
            :router="false"
            :collapse="isToggle"
            background-color="#445373"
            text-color="#BBC7D6"
            active-text-color="#2AA8E1"
            :collapse-transition="false"
          >
            <el-submenu :index="item.path" v-for="item in menus" :key="item.title">
              <!-- 一级菜单 -->
              <template slot="title">
                <svg class="iconfont" aria-hidden="true" style="width: 30px; height: 30px">
                  <use :xlink:href="`#el-icon-my${item.iocn}`" />
                </svg>
                <span v-text="item.title" style="font-size: 15px; margin-left: 3px"></span>
              </template>
              <!-- 二级菜单 -->
              <el-menu-item-group v-for="item2 in item.children" :key="item2.childTitle">
                <el-menu-item :index="item2.path" v-text="item2.childTitle" @click="addNema(item2)"></el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!-- 内容 -->
        <el-main class="tabs_big" :style="{ marginLeft: isToggle ? '65px' : '180px' }">
          <!-- 上方导航栏 -->
          <div class="tabs_boxMax" id="ScrollBox" @mousewheel.prevent="wojiucao(screenWidth, $event)" @mouseover="DOMMouseScroll(screenWidth)" :style="{ left: isToggle ? '65px' : '180px' }">
            <div class="tabs_box" :style="{ left: `${mousewheelNum}px` }" id="ContextMenu">
              <ul class="tabs_item no_select" ref="wojiucao">
                <div class="tabs_item2" @click="goHome" @contextmenu.stop="goHomeMenu" :style="bgIndex >= 0 ? 'backgroundColor:#fff' : 'backgroundColor:#42B983; color: #fff'">首页</div>
                <li
                  @contextmenu.prevent="aiyayaya(item, index)"
                  v-for="(item, index) in tabs"
                  :key="item.title"
                  :style="bgIndex === index ? 'backgroundColor:#42B983; color: #fff' : 'backgroundColor:#fff'"
                >
                  <i class="el-icon-star-on" v-show="bgIndex === index ? true : false" style="color: #fff; margin-right: 5px"></i>
                  <span v-text="item.title" @click="bgClick(item.path, index, item.jurisdiction)"></span>
                  <i class="el-icon-close" @click="removeTabs(item, index)" :style="bgIndex === index ? 'color:#fff' : 'color:#ccc'"></i>
                </li>
                <!-- <el-popover placement="bottom" width="150" trigger="click" :offset="offsetNum" v-model="visible">
              <ul class="guanbitab">
                <li class="guanbitabItem" v-for="item in guan" :key="item.title" @click="gubTab(item.title)">{{ item.title }}</li>
              </ul>
              <i class="el-icon-arrow-down arrow-down" slot="reference" @contextmenu.prevent="youjian($event)"></i>
              </el-popover>-->
              </ul>
              <!-- @update:show="(show) => contextMenuVisible = show" -->
              <!-- @update:show="contextMenuShow(caonimabide)" -->
              <vue-context-menu class="right-menu" :target="contextMenuTarget" :show="contextMenuVisible" @update:show="contextMenuShow">
                <ul class="guanbitab">
                  <li class="guanbitabItem" v-for="item in guan" :key="item.title" @click="gubTab(item.title)">{{ item.title }}</li>
                </ul>
              </vue-context-menu>
            </div>
          </div>
          <!-- main加载动画 -->
          <div v-loading="allmMainLoad" v-if="allmMainLoad === 'load'" class="tabs_big_load"></div>
          <div class="tabs_big_load" v-if="allmMainLoad === 'refresh'">
            <span class="refresh_btn" @click="refreshClick_main">
              <i class="el-icon-refresh"></i>
            </span>
          </div>
          <router-view @getSonMessageHome="sonMessageHome" @controlMainRefresh="controlMainRefresh" ref="childMain"></router-view>
        </el-main>
      </el-container>
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
        <span>确定要退出登录吗？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" class="btnSizeStyle">取 消</el-button>
          <el-button type="primary" @click="logoutUser" class="btnSizeStyle">确 定</el-button>
        </span>
      </el-dialog>
    </el-container>
  </div>
</template>
<script>
// removeUrl
import { getUrl, setUrl, removeUrl, clearUrl } from '@/utils/getUrl.js'
import { delMyCookie } from '@/utils/myCookie.js'
import { province } from '@/utils/pako.js'
import { pinT } from '@/utils/allUrl.js'
import { getTabAuthority } from '@/assets/js/getAuthority.js'
import { timeLoad } from '@/assets/js/setTime'

// 收缩图片
// import leftBg from '@/assets/images/leftBg.png'
// import leftBg2 from '@/assets/images/leftBg2.png'
// import rightBg from '@/assets/images/rightBg.png'
// import rightBg2 from '@/assets/images/rightBg2.png'
import { component as VueContextMenu } from '@xunlei/vue-context-menu'
// 菜单图片
// import synthesize from '../assets/images/menuIcon/default/综合监视.png'
// import polling from '../assets/images/menuIcon/default/巡检中心.png'
// import business from '../assets/images/menuIcon/default/业务中心.png'
// import property from '../assets/images/menuIcon/default/资产中心.png'
// import businessList from '../assets/images/menuIcon/default/业务报表.png'
// import knowledge from '../assets/images/menuIcon/default/知识库.png'
// import platform from '../assets/images/menuIcon/default/平台配置.png'
// import project from '../assets/images/menuIcon/default/工程管理.png'

// import synthesize2 from '../assets/images/menuIcon/pitch/综合监视.png'
// import polling2 from '../assets/images/menuIcon/pitch/巡检中心.png'
// import business2 from '../assets/images/menuIcon/pitch/业务中心.png'
// import property2 from '../assets/images/menuIcon/pitch/资产中心.png'
// import businessList2 from '../assets/images/menuIcon/pitch/业务报表.png'
// import knowledge2 from '../assets/images/menuIcon/pitch/知识库.png'
// import platform2 from '../assets/images/menuIcon/pitch/平台配置.png'
// import project2 from '../assets/images/menuIcon/pitch/工程管理.png'

// const arr = ['comprehensive-monitoring', 'inspection_center', 'business_center', 'asset_center', 'business_report', 'knowledge_base', 'platform_configuration', 'engineering', 'alarm']
// const arr2 = [
//   'comprehensive_monitoring_active',
//   'inspection_center_active',
//   'business_center_active',
//   'asset_center_active',
//   'business_report_active',
//   'knowledge_base_active',
//   'platform_configuration_active',
//   'engineering_active',
//   'alarm_active',
// ]
export default {
  data() {
    return {
      isActive: false,
      isToggle: false,
      bgIndex: '',
      tag: 1,
      // iconBg: leftBg,
      iconBg: 'fold',
      menus: [],
      // menus: [
      //   {
      //     path: '1',
      //     title: '综合管理',
      //     iocn: 'comprehensive-monitoring',
      //     children: [
      //       {
      //         path: '/excel',
      //         childTitle: '难受'
      //       }
      //       // {
      //       //   path: '1-2',
      //       //   childTitle: '想哭'
      //       // },
      //       // {
      //       //   path: '1-3',
      //       //   childTitle: '想哭了'
      //       // }
      //     ]
      //   },
      // ],
      tabs: [],
      userParams: [
        {
          icon: 'el-icon-user',
          value: '个人中心'
        }
        // {
        //   icon: 'el-icon-lock',
        //   value: '安全设置',
        // },
      ], // 用户个人中心
      user: {
        zh: '',
        lxdh: ''
      },
      offsetNum: '',
      guan: [
        {
          title: '刷新'
        },
        {
          title: '关闭全部'
        },
        {
          title: '关闭左侧'
        },
        {
          title: '关闭右侧'
        },
        {
          title: '关闭其他'
        }
      ],
      loadingGB: '',
      mousewheelNum: 0,
      screenWidth: document.body.clientWidth,
      contextMenuTarget: '', // 绑定的dom
      contextMenuVisible: false,
      nanananum: 0,
      // caonimabide: false,
      rightBox: [], // 关闭右侧
      leftBox: [], // 关闭左侧
      currentBox: [], // 关闭其他
      bgIndexCaiDan: '', // 刷新当前index
      userNames: '', // 用户名
      dialogVisible: false, // 退出登录弹出框
      homePageLoad: '', // 页面loading
      pageBoxTime: null,
      loginTimeKey: '', // 判断是否登录
      allmMainLoad: '', // 右侧栏加载动画
      allMainTime: null,
    }
  },
  components: {
    'vue-context-menu': VueContextMenu
  },
  watch: {
    tabs: {
      // 正确给 cData 赋值的 方法
      deep: true,
      handler(newVal, oldVal) {
        // console.log('newVal', newVal)
        // this.tabs = newVal
        // if (newVal.length <= 0) {
        //   this.$router.push('/welcome')
        // }
      },
    },
    screenWidth(val) {
      this.screenWidth = val
      // if (!this.timer) {
      //   console.log(val)
      //   this.screenWidth = val
      //   this.timer = true
      //   setTimeout(() => {
      //     this.timer = false
      //   })
      // }
    },
    homePageLoad(newVal, oldVal) {
      this.pageBoxTime = setTimeout(() => {
        if (this.homePageLoad === 'load') {
          this.homePageLoad = 'refresh' // 创新界面
        }
      }, timeLoad)
    },
    allmMainLoad(newVal, oldVal) {
      var index = 1
      this.allMainTime = setTimeout(() => {
        if (this.allMainTime === 'load') {
          console.log('定时器清除标记', index++)
          console.log(newVal, '------进来了-------', this.allmMainLoad, '----', this.allMainTime === 'load')
          this.allmMainLoad = 'refresh' // 右侧界面
        }
      }, timeLoad)
    },
  },
  created() {
    // 登陆超时 return
    this.loginTimeKey = getUrl('loginTimeKey')
    console.log('----', getUrl('loginTimeKey'))
    if (this.loginTimeKey) {
      this.homePageLoad = ''
      return
    }
    this.getMenus() // 获取权限/获取列表
    const tagName = getUrl('suaxinTag') // 刷新后位置
    const tabsnumBOx = getUrl('tabsnum') // 刷新后位置背景色
    this.bgIndex = tabsnumBOx
    this.tag = tagName
    this.$loading({
      lock: true,
      text: '努力加载中...',
      // text: 'Loading',
      // spinner: 'el-icon-loading',
      background: 'rgba(255, 255, 255, 0.7)'
    })
    this.loadingGB = setTimeout(() => {
      this.$loading().close()
    }, 10000)
    // 判断session中是否存储tabs,有就取值 没有就重新获取
    if (getUrl('tabs')) {
      this.allmMainLoad = ''
      console.log('-----created------', this.allmMainLoad)
      this.tabs = JSON.parse(getUrl('tabs')) || []
      this.bgIndex = getUrl('tabsnum') - ''
      console.log('已经存在tabs列表', this.bgIndex, this.tabs)
    } else {
      getTabAuthority(this) // 获取权限
      setUrl('tabsnum', 0)
      // console.log('不存在', this.bgIndex, this.tabs)
      this.bgIndex = 0
    }
    // this.tabs = JSON.parse(getUrl('tabs')) || []
    // this.bgIndex = getUrl('tabsnum') - ''
    // this.getmenus() // 获取菜单
    // const { data: res } = await this.$http.post('quanXian/selectMenu')
    // console.log(res)
    // res.data.forEach((item, index) => {
    //   this.menus[index].title = item.qxmc
    // })
    // 获取角色
    this.getRole()
    // 获取职务
    this.getPost()
    // 获取专长
    this.getExpertise()
    // 获取机构
    this.getMechanism()
    // 获取省市区地址
    this.getCityList()
    // // 监听鼠标是否移动
    // this.mouseYD()
    // console.log(plus.navigator)
    // this.Browser()
  },
  mounted() {
    const that = this
    window.onresize = () => {
      return (() => {
        that.screenWidth = document.body.clientWidth
      })()
    }
    const myChartContainer = document.getElementById('ContextMenu')
    // 右击显示菜单 区域位置
    this.contextMenuTarget = myChartContainer
    const activeMenuKey = sessionStorage.getItem('activeMenuKey')
    setTimeout(() => {
      this.handleOpenOnload(activeMenuKey)
    }, 500)
    // this.tag = ''
  },
  methods: {
    // 刷新界面回调函数
    controlMainRefresh(res) {
      clearTimeout(this.allMainTime)
      this.allmMainLoad = res
      console.log('----controlMainRefresh-----', this.allmMainLoad)
    },
    // 刷新界面
    refreshClick() {
      this.getMenus()
    },
    // 右侧main刷新函数
    refreshClick_main() {
      clearTimeout(this.allmMainLoad)
      this.allmMainLoad = 'load' // 设置为加载中
      this.$refs.childMain.getChildRefresh() // 需要加载子集的函数
      // console.log('------进来了refreshClick_main-------', this.allmMainLoad)
    },
    // 获取权限
    async getMenus() {
      console.log('--获取权限--', getUrl('loginTimeKey'))
      clearTimeout(this.pageBoxTime)
      clearTimeout(this.allMainTime)
      // 如果登录超时不需要加载动画
      if (getUrl('loginTimeKey')) {
        this.homePageLoad = 'load'
        this.allmMainLoad = 'load' // 右侧界面
      }
      // console.log('------getMenus前面-------', this.allmMainLoad)
      const { data: res } = await this.$http.post(`${pinT}yonghu/getQuanXian`)
      this.homePageLoad = '' // 整个页面加载样式
      this.allmMainLoad = ''
      // console.log('------getMenus后面-------', this.allmMainLoad)
      switch (res.code) {
        case '0000':
          setUrl('menus', JSON.stringify(res.data.menus)) // 保存目录
          setUrl('X-Cmmop-User-Token', res.data.access_token) // 保存token
          setUrl('userconter', JSON.stringify(res.data.user)) // 保存用户信息
          this.userNames = JSON.parse(getUrl('userconter')).zsxm // 用户名
          var obj = {}
          var obj2 = {}
          var newArr = []
          res.data.menus.forEach((item, index) => {
            // console.log(item)
            obj = {
              title: item.qxmc,
              path: item.id + '',
              // path: item.px + '',
              // iocn: arr[item.id - 1],
              // iocn: arr[item.px - 1],
              iocn: item.tp,
              tp_active: `${item.tp}_active`,
              tp: item.tp,
              children: []
            }
            newArr.push(obj)
            item.children.forEach(item2 => {
              obj2 = {
                childTitle: item2.qxmc,
                path: item2.qxfwlj,
                jurisdiction: item2.children
              }
              newArr[index].children.push(obj2)
            })
          })
          this.menus = newArr
          // console.log(this.menus)
          setUrl('jurisdiction', JSON.stringify(newArr))
          // var urls = window.location.hash.substr(2)
          // res.data.menus.forEach(item => {
          //   if (urls === item.qxfwlj) {
          //     console.log(item)
          //   }
          //   item.children.forEach(item2 => {
          //     if (urls === item2.qxfwlj) {
          //       console.log(item2)
          //     }
          //     item2.children.forEach(item3 => {
          //       if (urls === item3.qxfwlj) {
          //         setUrl('jurisdiction', JSON.stringify(item2.children))
          //       }
          //     })
          //   })
          // })
          break
        default:
          break
      }
    },
    // async getAuthority() {
    //   const accessName = this.$route.name
    //   const params = new URLSearchParams()
    //   params.append('QXFWLJ', accessName)
    //   const { data: res } = await this.$http.post(`${pinT}quanXian/selectQuanXian`, params)
    //   if (res.code === '0000') {
    //     setUrl('jurisdiction', JSON.stringify(res.data))
    //   }
    // },
    // // 监听鼠标是否移动
    // mouseYD() {
    //   let isMove = false
    //   let timer = null
    //   const messages = this.$message
    //   const routers = this.$router
    //   window.onmousemove = function() {
    //     isMove = true
    //     clearTimeout(timer)
    //     // console.log(isMove) // 移动时
    //     timer = setTimeout(function() {
    //       isMove = false
    //       console.log(isMove) // 静止后
    //       // 清除缓存
    //       messages({
    //         type: 'error',
    //         message: '由于您长时间无操作，将为您退出系统',
    //         center: true
    //       })
    //       window.sessionStorage.clear()
    //       routers.push('/')
    //     }, 1800000)
    //   }
    // },
    // 获取菜单数据
    async getmenus() {
      const menus = JSON.parse(getUrl('menus'))
      let obj = {}
      let obj2 = {}
      const newArr = []
      menus.forEach((item, index) => {
        obj = {
          title: item.qxmc,
          path: item.id + '',
          // path: item.px + '',
          // iocn: arr[item.id - 1],
          // iocn: arr[item.px - 1],
          iocn: item.tp,
          iocn_active: `${item.tp}_active`,
          children: []
        }
        newArr.push(obj)
        item.children.forEach(item2 => {
          obj2 = {
            childTitle: item2.qxmc,
            path: item2.qxfwlj,
            jurisdiction: item2.children
          }
          newArr[index].children.push(obj2)
        })
      })
      this.menus = newArr
    },
    // 收缩菜单栏
    btns_toggle() {
      this.isToggle = !this.isToggle
      if (this.isToggle) {
        // this.iconBg = rightBg2
        this.iconBg = 'unfold'
      } else {
        // this.iconBg = leftBg
        this.iconBg = 'fold'
      }
    },
    // 删除tab
    removeTabs(item, index) {
      // console.log('OK')
      this.tabs.splice(index, 1)
      setUrl('tabs', JSON.stringify(this.tabs))
      if (this.tabs[index - 1]) {
        this.tag = this.tabs[index - 1].path
      } else {
        this.tag = 1
      }
      // 如果关闭第一个需要返回到首页上
      if (this.bgIndex === 0) {
        this.bgIndex = -1
      }
      // console.log(this.bgIndex)
      if (this.bgIndex === -1) {
        return this.$router.push('/welcome')
      } else if (this.bgIndex > index) {
        this.bgIndex = this.tabs.length - 1
        setUrl('tabsnum', this.bgIndex)
      } else if (this.bgIndex === index) {
        const newPath = this.tabs[this.bgIndex - 1]
        this.bgIndex = index - 1
        setUrl('tabsnum', this.bgIndex)
        if (newPath) {
          if (newPath.path === '/mainboard') {
            return this.$router.push(newPath.path)
          }
          if (newPath.jurisdiction[0]) {
            setUrl('jurisdiction', JSON.stringify(newPath.jurisdiction))
            return this.$router.push(`/${newPath.jurisdiction[0].qxfwlj}`)
          }
          return this.$router.push(newPath.path)
        }
      }
      if (this.tabs.length <= 0) {
        this.$router.push('/welcome')
      }
    },
    // 添加导航栏
    addNema(list_item) {
      // 点击当前选中项不允许执行下面操作
      if (list_item.path === this.$route.matched[1].path) {
        return
      }
      clearTimeout(this.allmMainTime) // main加载样式
      this.allmMainLoad = 'load'
      // console.log('------addNema-------', this.allmMainLoad)
      const { childTitle, path, jurisdiction, sn, sbid } = list_item
      this.tag = path // 用于切换菜单选中样式
      setUrl('suaxinTag', path)
      setUrl('jurisdiction', JSON.stringify(jurisdiction))
      const judge = this.tabs
      const s = judge.filter(item => {
        return item.path === path
      })
      // console.log('s:', s)
      if (s.length === 0) {
        const title = {
          id: Date.parse(new Date()) + this.nanananum++,
          title: childTitle,
          path: path,
          jurisdiction: jurisdiction
        }
        this.tabs.push(title)
        this.gudinTab()
        setUrl('tabs', JSON.stringify(this.tabs))
        this.bgIndex = this.tabs.length - 1
        setUrl('tabsnum', this.bgIndex)
        // 主机备案转主机列表需要带sn
        if (path === '/mainboard') {
          if (sn) {
            return this.$router.push({ name: 'mainboardList', params: { sn: sn } })
          } else {
            return this.$router.push('/mainboardList')
          }
        }
        // 如果跳转地址是工单 需要带参数
        if (path === '/workOrderManage') {
          if (sbid) {
            this.$router.push({
              name: 'workOrderList',
              params: { id: sbid }
            })
            return
          } else {
            return this.$router.push({ name: 'workOrderList' })
          }
        }
        // 判断下面有没有分页,如果有就返回第一份分页
        if (jurisdiction[0]) {
          return this.$router.push(`/${jurisdiction[0].qxfwlj}`)
        } else {
          return this.$router.push(path)
        }
      } else {
        judge.filter((item, index) => {
          if (item.path === path) {
            this.cshaha(childTitle)
            return (this.bgIndex = index)
          }
        })
        // 主机备案转主机列表需要带sn
        if (path === '/mainboard') {
          if (sn) {
            return this.$router.push({ name: 'mainboardList', params: { sn: sn } })
          } else {
            return this.$router.push('/mainboardList')
          }
        }
        // 如果跳转地址是工单 需要带参数
        if (path === '/workOrderManage') {
          if (sbid) {
            this.$router.push({
              name: 'workOrderList',
              params: { id: sbid }
            })
            return
          } else {
            return this.$router.push({ name: 'workOrderList' })
          }
        }
        if (jurisdiction[0]) {
          return this.$router.push(`/${jurisdiction[0].qxfwlj}`)
        }
        return this.$router.push(path)
      }
    },
    // 导航栏背景切换
    bgClick(path, v, jurisdiction) {
      // 点击当前选中项不允许执行下面操作
      if (path === this.$route.matched[1].path) {
        return
      }
      // console.log('--上方tab---')
      clearTimeout(this.allMainTime) // main加载样式
      this.allmMainLoad = 'load'
      this.menus.forEach((item) => {
        item.children.forEach((jtem) => {
          if (path === jtem.path) {
            this.handleOpen(item.path)
          }
        })
      })
      this.$nextTick(() => {
        const arr = this.$refs.wojiucao.children
        let widthNum = 0
        arr.forEach((item, index) => {
          widthNum += item.scrollWidth
          if (v + 1 === index) {
            if (v + 1 >= 15) {
              const jianfa = widthNum - (widthNum + arr[v + 2].scrollWidth + 10)
              this.mousewheelNum = this.mousewheelNum + jianfa
            } else {
              this.mousewheelNum = this.mousewheelNum + arr[v].scrollWidth + 10
              if (this.mousewheelNum > 0) {
                this.mousewheelNum = 0
              }
            }
            // if (widthNum >= 1600) {
            //   this.mousewheelNum = 1600 - (widthNum + arr[v + 2].scrollWidth + 40)
            // } else {
            //   this.mousewheelNum = this.mousewheelNum + arr[v].scrollWidth + 40
            //   if (this.mousewheelNum > 0) {
            //     this.mousewheelNum = 0
            //   }
            // }
          }
        })
      })
      setUrl('jurisdiction', JSON.stringify(jurisdiction))
      setUrl('suaxinTag', path)
      this.tag = path
      this.bgIndex = v
      setUrl('tabsnum', this.bgIndex)
      if (path === '/mainboardList') {
        return this.$router.push(path)
      }
      if (jurisdiction[0]) {
        // console.log('--进--', jurisdiction[0].qxfwlj)
        return this.$router.push(`/${jurisdiction[0].qxfwlj}`)
      }
      return this.$router.push(path)
    },
    // 当前选中的元素 一级菜单
    handleOpen(key, keyPath) {
      // console.log('--------', key)
      sessionStorage.setItem('activeMenuKey', key)
      this.menus.forEach(item => {
        // item.iocn = arr[item.path - 1]
        // item.iocn = item.tp
        // console.log()
        if (item.path === key) {
          // console.log(item)
          // item.iocn = arr2[key - 1]
          item.iocn = item.tp_active
        } else {
          item.iocn = item.tp
        }
      })
      // this.menus[key - 1].iocn = arr2[key - 1]
      this.tag = key
    },
    handleOpenOnload(key) {
      sessionStorage.setItem('activeMenuKey', key)
      this.menus.forEach(item => {
        if (item.path === key) {
          item.iocn = item.tp_active
        }
      })
    },
    // 未选中的元素
    handleClose(key, keyPath) {
      this.menus.forEach(item => {
        if (item.path === key) {
          // item.iocn = arr[key - 1]
          item.iocn = item.tp
        }
      })
      // this.menus[key - 1].iocn = arr[key - 1]
    },
    information() {
      // console.log('ok')
    },
    // over() {
    //   if (this.isToggle) {
    //     this.iconBg = rightBg
    //   } else {
    //     this.iconBg = leftBg2
    //   }
    // },
    // out() {
    //   if (this.isToggle) {
    //     this.iconBg = rightBg2
    //   } else {
    //     this.iconBg = leftBg
    //   }
    // },
    // 跳转首页
    goHome() {
      this.bgIndex = -1
      setUrl('tabsnum', this.bgIndex)
      this.$router.push('/welcome')
    },
    // 获取角色
    async getRole() {
      const { data: res } = await this.$http.post(`${pinT}juese/selectJueSe`)
      const arr = []
      if (res.code !== '0000') {
        setUrl('RoleList', '')
        return this.$message({
          type: 'error',
          message: '角色' + res.message,
          center: true
        })
      } else {
        res.data.list.forEach(item => {
          const k = {
            value: item.id,
            label: item.jsmc
          }
          arr.push(k)
        })
        setUrl('RoleList', JSON.stringify(arr))
      }
    },
    // 获取机构
    async getMechanism() {
      const { data: res } = await this.$http.post(`${pinT}zzjg/list`)
      if (res.code !== '0000') {
        setUrl('Mechanism', '')
        return this.$message({
          type: 'error',
          message: '机构' + res.message,
          center: true
        })
      } else {
        const a = JSON.stringify(res.data.list)
        const newCity = a.replace(/id/g, 'value')
        const cityList = newCity.replace(/jgmc/g, 'label')
        const cityList2 = cityList.replace(/jgbmmc/g, 'label')
        const c = cityList2.replace(/bmList/g, 'children')
        setUrl('Mechanism', c)
      }

      // const arr = []
      // res.data.list.forEach((item, index) => {
      //   const k = {
      //     value: item.id,
      //     label: item.jgmc,
      //     children: []
      //   }
      //   arr.push(k)
      //   if (item.bmList !== null) {
      //     item.bmList.forEach(item2 => {
      //       const p = {
      //         value: item2.id,
      //         label: item2.jgbmmc
      //       }
      //       arr[index].children.push(p)
      //     })
      //   }
      // })
    },
    // 获取职务
    async getPost() {
      const params = new URLSearchParams()
      const arr = []
      params.append('lx', 1)
      const { data: res } = await this.$http.post(`${pinT}zwzc/list`, params)
      if (res.code !== '0000') {
        setUrl('PostList', '')
        return this.$message({
          type: 'error',
          message: '职务' + res.message,
          center: true
        })
      } else {
        res.data.list.forEach(item => {
          const k = {
            value: item.id,
            label: item.zwzcmc
          }
          arr.push(k)
        })
        setUrl('PostList', JSON.stringify(arr))
      }
    },
    // 获取专长
    async getExpertise() {
      const params = new URLSearchParams()
      const arr = []
      params.append('lx', 2)
      const { data: res } = await this.$http.post(`${pinT}zwzc/list`, params)
      if (res.code !== '0000') {
        setUrl('Expertise', '')
        return this.$message({
          type: 'error',
          message: '专长' + res.message,
          center: true
        })
      } else {
        res.data.list.forEach(item => {
          const k = {
            value: item.id,
            label: item.zwzcmc
          }
          arr.push(k)
        })
        setUrl('Expertise', JSON.stringify(arr))
      }
    },
    // 获取省市区地址
    async getCityList() {
      if (getUrl('district')) {
        clearTimeout(this.loadingGB)
        this.$loading().close()
      } else {
        // const { data: res } = await this.$http.post(`${pinT}ssq/c/selectSSQ`)
        // const city = JSON.stringify(res.data)
        // const newCity = city.replace(/area_code/g, 'value')
        // const cityList = newCity.replace(/area_name/g, 'label')
        province()
        // setUrl('CityList1', cityList)
        clearTimeout(this.loadingGB)
        this.$loading().close()
      }
    },
    goClickYM(e) {
      this.$router.push({
        name: 'userCore', // 路由
        params: {
          // 传递参数
          content: e
        }
      })
    },
    // 获取用户信息
    userImg() {
      const users = JSON.parse(getUrl('userconter')) || []
      this.user.zh = users.zh
      this.user.lxdh = users.lxdh
    },
    // 退出
    signOut() {
      // 展示退出确定弹框
      this.dialogVisible = true
    },
    // 点击确定按钮退出账号
    async logoutUser() {
      // this.$http.defaults.withCredentials = false
      const { data: res } = await this.$http.post(pinT + 'yonghu/loginOut')
      if (res.code === '0014') {
        this.$router.push('/login')
        return
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: '退出失败',
          center: true
        })
      }
      // 删除本地数据
      clearUrl()
      // 删除cookie
      delMyCookie('X-Cmmop-User-Token')
      this.dialogVisible = false
      this.$router.push('/')
    },
    // 导航栏
    gubTab(title) {
      if (title === '刷新') {
        // this.$router.go(0)
        this.bgClick(this.currentBox[this.currentBox.length - 1].path, this.bgIndexCaiDan, this.currentBox[this.currentBox.length - 1].jurisdiction)
      } else if (title === '关闭全部') {
        this.tabs = []
        this.tag = 1
        this.tabsnum = 0
        this.mousewheelNum = 0
        this.$router.push('/welcome')
      } else if (title === '关闭右侧') {
        this.tabs = this.leftBox
        this.bgClick(this.tabs[this.tabs.length - 1].path, this.tabs.length - 1, this.tabs[this.tabs.length - 1].jurisdiction)
      } else if (title === '关闭左侧') {
        this.tabs = this.rightBox
        this.bgClick(this.tabs[this.tabs.length - 1].path, this.tabs.length - 1, this.tabs[this.tabs.length - 1].jurisdiction)
      } else if (title === '关闭其他') {
        this.tabs = this.currentBox
        this.mousewheelNum = 0
        this.bgClick(this.tabs[this.tabs.length - 1].path, this.tabs.length - 1, this.tabs[this.tabs.length - 1].jurisdiction)
      }
      setUrl('tabs', JSON.stringify(this.tabs))
      this.rightBox = []
      this.leftBox = []
      this.currentBox = []
      // if (title === '关闭全部') {
      //   this.tabs = []
      //   this.tag = 1
      // } else {
      //   this.tabs.splice(this.bgIndex, 1)
      //   this.bgIndex = this.tabs.length - 1
      //   if (this.tabs[this.bgIndex]) {
      //     this.tag = this.tabs[this.bgIndex].path || 1
      //   } else {
      //     this.tag = 1
      //   }
      // }
      this.contextMenuVisible = false
    },
    // 导航栏鼠标中键滚动
    wojiucao(val, e) {
      const offWidth = this.$refs.wojiucao.offsetWidth
      if (offWidth / 1.5 > val - 180) {
        if (e.wheelDelta < 1) {
          this.mousewheelNum += 50
          if (this.mousewheelNum > 0) {
            return (this.mousewheelNum = 0)
          }
        } else {
          this.mousewheelNum -= 50
          if (this.mousewheelNum < 0) {
            return (this.mousewheelNum = Math.round(val - 180 - offWidth / 1.5))
          }
        }
      } else {
        return (this.mousewheelNum = 0)
      }
    },
    DOMMouseScroll(val) {
      const scrollBox = document.getElementById('ScrollBox')
      const offWidth = this.$refs.wojiucao.offsetWidth
      if (this.Browser() === 'firefox') {
        scrollBox.addEventListener('DOMMouseScroll', e => {
          if (offWidth / 1.5 > val - 180) {
            if (e.detail < 1) {
              this.mousewheelNum += 50
              if (this.mousewheelNum > 0) {
                return (this.mousewheelNum = 0)
              }
            } else {
              this.mousewheelNum -= 50
              if (this.mousewheelNum < 0) {
                return (this.mousewheelNum = Math.round(val - 180 - offWidth / 1.5))
              }
            }
          } else {
            return (this.mousewheelNum = 0)
          }
        })
      }
      // else {
      //   scrollBox.addEventListener('mousewheel', e => {
      //     if (offWidth / 1.5 > val - 180) {
      //       if (e.wheelDelta < 1) {
      //         this.mousewheelNum += 50
      //         if (this.mousewheelNum > 0) {
      //           return (this.mousewheelNum = 0)
      //         }
      //       } else {
      //         this.mousewheelNum -= 50
      //         if (this.mousewheelNum < 0) {
      //           return (this.mousewheelNum = Math.round(val - 180 - offWidth / 1.5))
      //         }
      //       }
      //     } else {
      //       return (this.mousewheelNum = 0)
      //     }
      //   })
      // }
    },
    Browser() {
      const banben = navigator.userAgent.toLowerCase()
      // const liulanqi = (banben.match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/) || [0, '0'])[1]
      if (banben.indexOf('firefox') >= 0) {
        return 'firefox'
      } else if (banben.indexOf('chrome') >= 0) {
        return 'chrome'
      } else if (banben.indexOf('opera') >= 0) {
        return 'opera'
      } else if (banben.indexOf('safari') >= 0) {
        return 'safari'
      }
    },
    // 固定导航栏，往左移
    gudinTab() {
      // scrollWidth
      const offWidth = this.$refs.wojiucao.offsetWidth
      if (offWidth / 1.4 >= this.screenWidth - 180) {
        this.mousewheelNum = Math.round(this.screenWidth - 180 - offWidth / 1.4) + 20
      }
    },
    cshaha(name) {
      // const offWidth = this.$refs.wojiucao.offsetWidth
      this.$nextTick(() => {
        const arr = this.$refs.wojiucao.children
        let widthNum = 0
        arr.forEach(item => {
          widthNum += item.scrollWidth
          if (name === item.innerText) {
            if (widthNum >= 1600) {
              // this.mousewheelNum = Math.round(this.screenWidth - 180 - offWidth / 1.5)
              this.mousewheelNum = 1600 - (widthNum + 50)
              console.log(this.mousewheelNum)
            } else {
              this.mousewheelNum = 0
            }
          }
        })
      })
    },
    // 首页
    goHomeMenu() {
      this.contextMenuVisible = false
    },
    // 导航栏右键
    aiyayaya(item, index) {
      this.leftBox = []
      this.rightBox = []
      this.currentBox = []
      this.bgIndexCaiDan = 0
      this.tabs.forEach(vals => {
        if (vals.id >= item.id) {
          this.rightBox.push(vals)
        } else if (vals.id <= item.id) {
          this.leftBox.push(vals)
        }
      })
      this.bgIndexCaiDan = index
      this.currentBox.push(item)
      this.leftBox = [...this.leftBox, ...this.currentBox]
      // this.caonimabide = true
    },
    contextMenuShow(val) {
      this.contextMenuVisible = val
    },
    // 子组件传值
    sonMessageHome(val) {
      console.log('子组件传值:', val)
      const item = {
        childTitle: val.qxmc,
        jurisdiction: val.children,
        path: val.qxfwlj
      }
      // 主机备案列表转到前卫主机配置时要带sn
      if (val.sn) {
        item.sn = val.sn
      }
      // 故障列表转工单需要带设备id
      if (val.sbid) {
        item.sbid = val.sbid
      }
      this.addNema(item)
    }
  },
  destroyed() {
    removeUrl('tabs')
    removeUrl('tabsnum')
    // removeUrl('loginTimeKey') // 退出界面清除登录超时标记
    // 离开界面清除最后一次打开状态
    sessionStorage.setItem('activeMenuKey', '')
    setUrl('suaxinTag', '') // 刷新后位置/
    getUrl('tabsnum', '') // 刷新后位置背景色
    setUrl('tabs', '')
    clearTimeout(this.allmMainTime) // main加载样式
    clearUrl('loginTimeKey')
  },
}
</script>
<style lang="scss" scoped>
.homeBoxMask,
.homeBoxRefresh {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}
.homeBoxRefresh,
.tabs_big_load {
  background-color: #fff;
  opacity: 0.8;
  .refresh_btn {
    display: inline-block;
    padding: 5px;
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    i {
      font-size: 30px;
      color: #707070;
    }
    &:hover {
      background-color: #f2f2f2;
      border-radius: 50%;
    }
  }
}
// .websiteTitle {
// height: 60px;
// .websiteTitle {
//   display: inline-block;
//   text-align: center;
//   font-weight: 500;
//   font-size: 18px;
//   text-shadow: 1px 0 0.5px rgba(0, 0, 0, 0.5);
// }
.tabBtn {
  height: 60px;
  padding: 0 15px;
  display: inline-block;
  > i {
    font-size: 22px;
    padding-top: 1px;
    line-height: 60px;
  }
  &:hover {
    background-color: #f2f2f2 !important;
  }
}
// }
.right-menu {
  position: fixed;
  width: 100px;
  border: 1px solid #eee;
  border-radius: 5px;
  box-shadow: 0 0.5em 1em 0 rgba(0, 0, 0, 0.1);
  z-index: 9999999999 !important;
  background-color: #fff;
  overflow: hidden;
}
.home-container {
  height: 100%;
  .min_max {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 500;
    left: 180px;
    cursor: pointer;
  }
  .el-main {
    padding-top: 0;
    overflow: hidden;
    // background-color: #F2F2F2;
  }
  .el-menu {
    border: none;
    .el-menu-item {
      padding: 0;
      padding-left: 52px !important;
      min-width: 180px;
      background-color: #36425c !important;
    }
  }
  .tabs_big_load {
    position: relative;
    height: 100%;
    width: 100%;
    // background-color: pink;
  }
  .tabs_big {
    margin: 90px 0 0 180px;
    // min-height: 400px;
    .tabs_boxMax {
      width: 100%;
      background-color: #fff;
      text-align: center;
      height: 32px;
      line-height: 25px;
      // padding: 3px 0;
      margin-bottom: 1px;
      position: fixed;
      top: 60px;
      z-index: 600;
      white-space: nowrap;
      overflow: hidden;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
      .tabs_box {
        position: absolute;
        overflow: auto;
        overflow-y: hidden;
        .tabs_item {
          white-space: nowrap;
          width: 150%;
          height: 32px;
          padding: 3px 0;
          // display: flex;
          .arrow-down {
            font-size: 15px;
            height: 30px;
            line-height: 30px;
            width: 30px;
            // margin-left: 5px;
            border: 1px solid #d2d2d2;
            font-weight: 700;
            color: #a0a0a0;
            background-color: #f0f0f0;
            // border-left: none;
          }
          > li:first-child {
            border-left: 1px solid #d2d2d2;
          }
          .tabs_item2 {
            float: left;
            margin-left: 15px;
            // position: relative;
            padding: 0 15px;
            background-color: #fff;
            border: 1px solid #d2d2d2;
            margin-right: 5px;
            cursor: pointer;
          }
          > li {
            float: left;
            // position: relative;
            padding: 0 10px;
            background-color: #f0f0f0;
            border: 1px solid #d2d2d2;
            // border-left: none;
            // border-bottom: none;
            margin: 0 3px;
            cursor: pointer;
            > span {
              display: inline-block;
              height: 100%;
              font-size: 12px;
            }
            .el-icon-close {
              margin-left: 10px;
              font-size: 15px;
              font-weight: 700;
              color: #a0a0a0;
              border-radius: 50px;
            }
            .el-icon-close:hover {
              background-color: rgba(0, 0, 0, 0.1);
            }
          }
        }
      }
    }
  }
  .el-header {
    padding: 0;
  }
  .header_box {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    color: rgba(47, 48, 51, 1);
    align-items: center;
    height: 60px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 500;
    padding-right: 20px;
    .xiaoBtn {
      height: 0;
      position: absolute;
      right: 180px;
      display: flex;
      align-items: center;
    }
    .xiaoBtns {
      color: #000;
      transition: all 0.5s;
      padding: 1px;
      cursor: pointer;
    }
    .xiaoBtns:hover {
      color: #409eff !important;
      transform: scale(1.1);
    }
    .naosouBtn {
      display: flex;
      align-items: center;
      .user_btn {
        cursor: pointer;
      }
      .xiaoBtn2 {
        margin-right: 10px;
        font-size: 12px;
        padding-top: -10px;
        // line-height: 32px;
        // vertical-align: middle;
        text-shadow: 3px 2px 5px #eee;
        cursor: pointer;
      }
    }

    .outLogin {
      display: flex;
      align-items: center;
      // margin-left: 10px;
      > span {
        padding-left: 5px;
        font-weight: 500;
        font-size: 18px;
        text-shadow: 1px 0 0.5px rgba(0, 0, 0, 0.5);
      }
      .big_img_box {
        // width: 179px;
        height: 60px;
        background-color: #29aae7;
        display: flex;
        justify-content: center;
        align-items: center;
        .img_box {
          width: 120px;
          height: 24px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  .el-aside {
    background-color: #445373;
    border-right: 1px solid #ececec;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 180px;
    position: fixed;
    z-index: 200;
    top: 60px;
    left: 0;
    bottom: 0;
    .el-icon-location {
      visibility: middle;
    }
    &::-webkit-scrollbar {
      float: right;
      width: 0px;
      height: 12px;
      background-color: #ebf5fd;
    }
  }
}
.guanbitabItem {
  width: 100%;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  box-sizing: border-box;
  cursor: pointer;
}
.guanbitabItem:hover {
  background-color: #41b883;
  color: #fff;
}
.scrollY {
  overflow-y: scroll;
}
// ::v-deep .el-submenu__title {
//   display: flex;
//   align-items: center;
// }
// ::v-deep .el-submenu__icon-arrow {
//   margin-top: 0;
//   transform: translateY(-50%);
// }
</style>
<style lang="scss">
.header_box {
  height: 60px;
  position: fixed;
  z-index: 999;
  width: 100%;
}
</style>
